<template>
    <div class="industry">
        <div class="theme">
            <div class="wrapper">
                <h1 class="title">行业解决方案
                </h1>
                <h2 class="desc">
                    行业应用软件指针对行业应用的一体化、智能化软件系统。中科数测可依据GJB-Z
                    141-2004《军用软件测试指南》针对军用软件进行软件验证测试和鉴定测评工作；验证软件是否满足软件研制任务书或合同、系统/子系统规格说明、系统/子系统设计说明、软件需求规格说明、软件设计说明等规定的软件功能、性能、接口及其他特性要求；验证软件的技术文档及软件运行所依赖的数据是否完整、正确、一致、规范；发现软件程序、技术文档、数据问题；为软件确认、验收以及软件质量评估、能力评估等提供依据。
                </h2>
            </div>
        </div>
        <div class="section" style="background-image: none;">
            <div class="wrapper">
                <h2 id="csjb" class="section-title">军用软件测试级别
                </h2>
                <ul class="list-wrapper">
                    <li class="list-item">
                        <div class="content">
                            <div class="title">单元测试
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">单元集成测试
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">配置项测试
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">配置项集成测试
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">系统测试
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="section" style="background-image: none;background-color: #f7f7f7">
            <div class="wrapper">
                <h2 id="cslx" class="section-title">测试类型
                </h2>
                <div class="section-content">
                    <p class="sub-desc">●文档类测试。文档审查； <br />
                        ●代码类测试。代码审查、代码走查、静态分析、逻辑测试； <br />
                        ●数据类测试。数据审查、数据处理测试； <br />
                        ●功能类测试。功能测试、边界测试、可恢复性测试、安装性测试；<br />
                        ●性能类测试。性能测试、余量测试、强度测试、容量测试； <br />
                        ●接口类测试。接口测试、人机交互界面测试；<br />
                        ●专项类测试。安全性测试、可靠性测试、互操作性测试、兼容性测试。<br />
                    </p>
                </div>
            </div>
        </div>
        <div class="section" style="background-image: none;">
            <div class="wrapper">
                <h2 id="csff" class="section-title">测试方法
                </h2>
                <div class="section-content">
                    <p class="sub-desc">
                        ●单元测试和单元集成测试一般采用白盒测试方法，辅助以黑盒测试方法；配置项测试、配置项集成测试和系统测试一般采用黑盒测试方法，辅助以白盒测试方法； <br />
                        ●测试用例设计时，应依据测试类型的特点，使用恰当的测试方法对测试用例进行分析与设计，确保测试用例的充分性、典型性、准确性和合理性；<br />
                        ●测试方法的使用结果应在测试说明中进行详细说明，基于某测试方法生成的测试用例集，应进行统一归类说明；<br />
                        ●基于可量化度量的测试方法生成的测试用例，其测试结果应进行量化评价。<br />

                    </p>
                </div>
            </div>
        </div>
        <div class="section" style="background-image: none;background-color: #f7f7f7">
            <div class="wrapper">
                <h2 id="csgc" class="section-title">测试过程
                </h2>
                <div class="section-content">
                    <p class="sub-desc">
                        ●测试需求分析与策划。确定需要测试的内容、测试的充分性要求，提出测试的基本方法；确定测试的资源、技术需求；分析测试风险，制定测试计划/大纲；进行测试计划/大纲评审；<br />
                        ●测试设计与实现。设计和选取测试用例；获取并验证测试数据；根据测试资源、风险等约束
                        条件，确定测试用例执行顺序，编制测试说明；获取测试资源，开发测试软件；建立并校准测试环境；进行测试说明与测试就绪评审；<br />
                        ●测试执行。执行测试用例，获取并记录测试结果数据；分析测试过程的正常或异常终止情况，视情补充或停止测试；对测试过程中发现的问题进行分析确认并填写问题报告单；<br />
                        ●测试总结。汇总测试数据，总结测试工作，评估测试结果，描述测试状态；编制测试报告，进行测试总结评审。<br />
                    </p>
                </div>
            </div>
        </div>
        <div class="section" style="background-image: none;background-color: #f7f7f7">
            <div class="wrapper">
                <h2 id="cswd" class="section-title">测试文档</h2>
                <ul class="list-wrapper">
                    <li class="list-item">
                        <div class="content">
                            <div class="title">软件测试计划/大纲
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">软件测试说明
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">软件测试记录
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">软件问题报告
                            </div>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="content">
                            <div class="title">软件测试报告
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="anchor" style="width:130px">
            <el-anchor :offset="70">
                <el-anchor-link title="csjb" class="ant-anchor-ink" @click="goAnchor('#csjb')">
                    军用软件测试级别
                </el-anchor-link>
                <el-anchor-link title="cslx" class="ant-anchor-ink" @click="goAnchor('#cslx')">
                    测试类型
                </el-anchor-link>
                <el-anchor-link title="csff" class="ant-anchor-ink" @click="goAnchor('#csff')">
                    测试方法
                </el-anchor-link>
                <el-anchor-link title="csgc" class="ant-anchor-ink" @click="goAnchor('#csgc')">
                    测试过程
                </el-anchor-link>
                <el-anchor-link title="cswd" class="ant-anchor-ink" @click="goAnchor('#cswd')">
                    测试文档
                </el-anchor-link>
            </el-anchor>
        </div>
    </div>

</template>

<script setup>
const goAnchor = (selector) => {
    document.querySelector(selector).scrollIntoView({
        behavior: "smooth"
    });
}
</script>

<style lang="scss" scope>
.industry {
    margin-top: 60px;

    .theme {
        height: 626px;
        width: 100%;
        background: #f7f7f7;
        background-image: url("@/assets/img/bac1.jpg");
        background-size: 100% 100%;

        .wrapper {
            margin: 0 auto;
            max-width: 1232px;
            padding: 167px 16px 0;
            position: relative;
            width: 100%;

            .title {
                color: #333;
                display: inline-block;
                font-size: 42px;
                font-weight: 700;
                margin-bottom: 12px;
                position: relative;
            }

            .desc {
                color: #333;
                font-size: 20px;
                font-weight: 400;
                line-height: 36px;
                margin-bottom: 40px;
                max-width: 680px;
            }
        }
    }

    .section {
        width: 100%;
        background: #fff;
        padding-bottom: 100px;
        background-image: url("@/assets/img/1d0799d2.png");
        background-size: 100% 100%;

        .wrapper {
            height: 100%;
            margin: 0 auto;
            max-width: 1232px;
            padding: 80px 16px 0;

            .section-title {
                margin-bottom: 50px;
                padding: 0 10px;
                color: #000;
                font-size: 32px;
                font-weight: 500;
                margin-bottom: 60px;
                text-align: center;
            }

            .section-content {
                zoom: 1;
                box-sizing: border-box;
                display: block;
                height: auto;
                margin-left: 0;
                margin-right: 0;
                position: relative;
                background-color: #fff;
                box-shadow: 0 20px 60px 0 rgba(0, 0, 0, .1);
                padding: 30px;

                .sub-title {
                    color: #000;
                    font-size: 20px;
                    font-weight: 500;
                    margin: 30px 0 10px;
                }

                .sub-desc {
                    color: #666;
                    font-size: 14px;
                    line-height: 24px;
                    margin-bottom: 30px;
                    white-space: pre-line;
                }
            }

            .section-row {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                margin: 0 -16px;

                .box {
                    box-sizing: border-box;
                    display: block;
                    width: 50%;

                    .item {
                        padding: 0 10px;

                        .sub-title {
                            color: #000;
                            font-size: 20px;
                            font-weight: 500;
                            margin-bottom: 11px;
                            position: relative;
                        }

                        .sub-desc {
                            color: #666;
                            font-size: 16px;
                            line-height: 28px;
                            margin: 0;
                            white-space: pre-line;
                        }
                    }
                }
            }

            .list-wrapper {
                display: flex;
                justify-content: center;
                margin: 0 -16px;

                .list-item {
                    border: 1px solid #e7e7e7;
                    border-radius: 4px;
                    cursor: pointer;
                    display: flex;
                    margin: 0 16px 16px;
                    min-height: 30px;
                    padding: 30px;

                    .content {
                        flex: 1;

                        .title {
                            align-items: center;
                            display: flex;
                            justify-content: space-between;
                        }

                        .title:before {
                            background: #0074ff;
                            content: "";
                            height: 15px;
                            left: -10px;
                            position: relative;
                            top: 10px;
                            transform: translateY(-50%);
                            width: 5px;
                        }

                    }
                }

                .list-item:hover {
                    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .1);
                }
            }
        }
    }

    .anchor {
        position: fixed;
        width: 6%;
        top: 25%;
        left: 5%;
        // transform: translateX(-860px);
        padding: 5px;
        border-radius: 4px;
        background-color: rgb(255, 255, 255);
        box-sizing: border-box;
        box-shadow: 0 5px 16px 0 rgba(0, 0, 0, .1);
    }
}
</style>